import  './list.css';
import React, { useState,useEffect,useMemo} from 'react';
import {ClockCircleOutlined,UserOutlined,LikeOutlined,EyeOutlined,RightOutlined} from '@ant-design/icons'
import { Link } from 'react-router-dom';
import { Row,Col, Empty,List,Pagination,Tree,Affix} from 'antd';
import axios from '../global/axios';
import api from '../global/api';
const ListData = (data) => {
  console.log('bbb',data);
  function listDataFn(listData){
    return (
      <List 
        dataSource={listData}
        renderItem={item => (
          <List.Item>
            <Row className="info-content">
              <Col span={8}>
                <span className="info-img"><img src={api.cosHttp+item.titleImg} /></span>
              </Col>
              <Col className="info-li" span={16}>
                <h4 className="ellipsis"><span>{item.title}</span></h4>
                <p className="hidden-xs">{item.introduct}</p>
              </Col>
              <div className="text-bot">
                <ClockCircleOutlined /><span className="en">{item.created}</span>
                <UserOutlined /><span className="en">admin</span>
                <LikeOutlined /><span className="en">{item.likeNum}</span>
                <EyeOutlined /><span className="en">{item.clickNum}</span>
              </div>              
            </Row>
          </List.Item>
        )}
      />    
    );
  }
  const listDataMemo = useMemo(()=>listDataFn(data.data),[data.data]);
  return(
    <>
      {listDataMemo}
    </>
  )
}
const ListPage = () => {
  let _channel = {channel:'list'};
  const [ header, setHeader ] = useState('');
  const [ list, setList ] = useState([]);
  const [ totalNum, setTotalNum ] = useState(0);
  const [ page, setPage ] = useState(1);
  const [ treeData, setTreeData ] = useState([]);
  const [ tags, setTags] = useState([]);
  
  useEffect(()=>{
		const getListPage = async () => {
      let _res = await axios.get(api.getChannel,{params:_channel});
      const pageData = _res.data.pageData;
      setHeader(pageData.header.resContent);
      let list = await axios.get(api.getContentList);
      setList(list.data);
      setTotalNum(list.totalNum);
      let treeData = await axios.get(api.getContentCate);
 			var _treeData = treeData.data.map(item => {
        item.title = item.cateName;
        item.key = item.id;
        item.children.forEach(subItem => {
          subItem.key = subItem.id;          
          subItem.title = subItem.cateName;
        });
        return item;
      })
      setTreeData(_treeData);
			let tags = await axios.get(api.getContentTags);
			tags = tags.data;
      setTags(tags);      
    }      
    getListPage();
  },[]) 
  return(
    <div className="home">
      <div className="jumbotron">
        <div className="wh" dangerouslySetInnerHTML={{__html:header}}></div>
        <div className="lang">
          <div className="lang_2"></div>
        </div>    
      </div>
      <div className="w path">
        <Link to="/index">首页</Link>
        <RightOutlined className="path-icon" />
        资讯列表
      </div>
      <div className="w"  style={{paddingBottom:'20px'}}>
        <Row className="list" gutter={15}>
          <Col xs={24} sm={24} md={17} lg={17} xl={17}>
            <ListData data={list} /> 
            <div className="page">
              <Pagination defaultCurrent={page} pageSize={6} total={totalNum}/>
            </div>                   
          </Col>
          <Col xs={0} sm={0} md={0} lg={7} xl={7}>
            <div className="tree">
              <h4 className="tree-tit">资讯分类</h4>
              {
                treeData.length > 0 ?
                <Tree  style = {{padding:'0 0 15px 0'}} 
                  defaultExpandAll = {true}
                  treeData = {treeData} 
                  blockNode 
                />
                : ''
              }
            </div>
            <Affix offsetTop={95}>
              <div className="tree">
                <h4 className="tree-tit">热门标签</h4>
                <div className="tag en">
                  {
                    tags.map(item => {
                      return(
                        <span key={item.id}>{item.tagName}</span>
                      )
                    })
                  }
                </div>
              </div>
            </Affix>
          </Col>
        </Row>        
      </div>      
    </div>
  )
}
export default ListPage;
